<template>
  <div class="topBanner"
       v-if="showBanner"
       @click="navToDetailPage(linkUrl)">
    <img :src="topBanner"
         class="topBanner-img"
         alt="">
    <img class="close"
         @click.prevent.stop="closeBanner"
         src="../assets/images/close.png"
         alt="">
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import imgUrl from "@/assets/images/mBanner.png";

export default {
  data () {
    return {
      topBanner: '',
      showBanner: true,
      linkUrl: ''
    }
  },
  created () {
    this.$ajax.post('https://api.zhubaba.cn/advertising/adminPcBannerListAdvertising').then(res => {
      if (res.data.code == 0) {
        if (res.data.data) {
          // console.log(this.isMobile())
          if (this.isMobile) { //移动端
            this.topBanner = imgUrl
            this.linkUrl = res.data.data.link
            this.$store.dispatch('setTopBanner', true)
          } else {
            this.topBanner = res.data.data.img;
            this.linkUrl = res.data.data.link
            this.$store.dispatch('setTopBanner', true)
          }
        } else {
          this.$store.dispatch('setTopBanner', false)
        }
      } else {
        this.$message.error(res.data.msg)
      }
    })
  },
  computed: {
    // 添加判断方法
    isMobile () {
      let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
      return flag;
    },
  },
  methods: {

    // 跳转
    navToDetailPage (link) {
      if (link == "#") {
        return
      }
      window.open(link, '_blank');
    },
    closeBanner () {
      this.showBanner = false
      this.$store.dispatch('setTopBanner', false)
    }
  },

  mounted () {
    // if (this.isMobile && this.topBanner) { //移动端
    //   this.mobileUrl = imgUrl
    // }
  }


}
</script>

<style scoped>
.topBanner {
  position: relative;
}

.topBanner-img {
  width: 100%;
  height: 50px;
  object-fit: fill;
}

.close {
  position: absolute;
  right: 10px;
  top: 14px;
  z-index: 100;
  color: #fff;
  width: 13px;
  height: 13px;
}

.btn {
  position: absolute;
  right: 23%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
</style>